<template>
  <div class="app-container">
    <el-form :inline="true"
             :model="filters"
             ref="refForm"
             :rules="rules"
             class="demo-form-inline filter-container">
      <el-form-item prop="queryTime"
                    label="查询时间">
        <el-date-picker
          v-model="filters.queryTime"
          class="filter-item"
          type="datetimerange"
          align="center"
          unlink-panels
          :range-separator="$t('language.finance.recharge.to')"
          :start-placeholder="$t('language.finance.recharge.startDate')"
          :end-placeholder="$t('language.finance.recharge.endDate')"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerLimit">
        </el-date-picker>
      </el-form-item>
        <el-form-item label="会员账户名"
                      prop="username">
          <el-input v-model="filters.username"
                    style="width: 200px;"/>
        </el-form-item>
       <el-form-item label="投注内容" prop="sportsEventName">
         <el-input v-model="filters.sportsEventName" style="width:200px" ></el-input>
       </el-form-item>
        <el-button type="primary"
                   v-waves
                   icon="el-icon-search"
                   @click="search">搜索
        </el-button>
        <el-button @click="resetFilter">重置</el-button>
    </el-form>
    <el-table height='540'
              :data="tableData.list"
              v-loading="loading"
              element-loading-text="给我一点时间"
              border
              fit
              highlight-current-row
              show-summary
              :summary-method="getLocalSummaries"
              style="width: 100%">
      <el-table-column label="第三方订单号"
                       align="center"
                       width="110px">
        <template slot-scope="{row}">
          {{row.merOrderId}}
        </template>
      </el-table-column>
      <el-table-column label="下注时间"
                       align="center"
                       width="90px">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="派彩时间"
                       align="center"
                       width="90px">
        <template slot-scope="{row}">
          {{row.payoutTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="账户名"
                       align="center">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>

      <el-table-column label="游戏账户名"
                       align="center">
        <template slot-scope="{row}">
          {{row.merUsername}}
        </template>
      </el-table-column>
      <el-table-column label="游戏平台"
                       align="center">
        <template slot-scope="{row}">
          {{row.channelName}}
        </template>
      </el-table-column>
      <el-table-column label="子游戏"
                       align="center">
        <template slot-scope="{row}">
          {{row.gameName}}
        </template>
      </el-table-column>
      <el-table-column label="投注内容"
                       align="center"
                       width="160px">
        <template slot-scope="{row}">
          <span v-if="row.game == 3"
                style="color: #409eff;cursor: pointer"
                @click="openDialog({dialogName: 'game-dialog', props: row })">
            {{ checkShowDetail(row) }}
          </span>
          <span v-else>
            {{ checkShowDetail(row) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="游戏结果"
                       align="center"
                       width="160px">
        <template slot-scope="{row}">
          {{row.gameResult}}
        </template>
      </el-table-column>
      <el-table-column label="注单状态"
                       align="center"
                       width="82px">
        <template slot-scope="{row}">
          <el-tag>
            {{row.status | toConverter('NOTE_STATUS')}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下注金额"
                       align="center"
                       prop="amount">
        <template slot-scope="{row}">
          <span v-if="row.betWays==0"> {{row.amount | currency}}</span> <!--平台类-->
          <span v-else> {{row.playerAmount | currency}}</span> <!--玩家类-->
        </template>
      </el-table-column>
      <el-table-column label="派彩金额"
                       align="center"
                       prop="prize">
        <template slot-scope="{row}">
          <span v-if="row.betWays==0"> {{row.prize | currency}}</span> <!--平台类-->
          <span v-else> {{row.playerPrize | currency}}</span> <!--玩家类-->
        </template>
      </el-table-column>
      <el-table-column label="同步时间"
                       align="center"
                       width="90px">
        <template slot-scope="{row}">
          {{row.syncTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="输赢"
                       align="center"
                       prop="totalWin">
        <template slot-scope="{row}">
          {{row.totalWin | currency}}
          <!-- <span v-if="row.betWays==0"> {{row.win | currency}}</span> <!--平台类-->
          <!--<span v-else> {{ row.playerWin  | currency}}</span> 玩家类 -->
        </template>
      </el-table-column>
      <el-table-column label="公司有效投注"
                       align="center"
                       prop="effectiveAmount">
        <template slot-scope="{row}">
          <span>{{row.effectiveAmount | currency}}</span>
          <!-- <span v-if="row.betWays==0"> {{row.effectiveAmount | currency}}</span> <!--平台类-->
          <!-- <span v-else> {{row.playerAmount | currency}}</span> <!--玩家类-->
        </template>
      </el-table-column>
      <el-table-column label="注单号"
                       align="center"
                       width="110px">
        <template slot-scope="{row}">
          {{row.orderId}}
        </template>
      </el-table-column>
      <el-table-column label="所属代理"
                       align="center">
        <template slot-scope="{row}">
          {{row.parentName}}
        </template>
      </el-table-column>
      <el-table-column label="活动流水"
                       align="center"
                       prop="validAmount">
        <template slot-scope="{row}">
          {{row.validAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="备注"
                       align="center">
        <template slot-scope="{row}">
          {{row.validRemark}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background
                     @size-change="gridSizeChange"
                     @current-change="gridCurrentChange"
                     :current-page="filters.page"
                     :page-sizes="gridPageSize"
                     :page-size="filters.size"
                     :layout="gridLayout"
                     :total="tableData.total">
      </el-pagination>
    </div>
    <game-dialog v-if="dialogName === 'game-dialog'"
                 v-model="dialogVisible"
                 :row-data="dialogProps"
                 @submit="successBack"/>
  </div>
</template>

<script>
import {
  form, grid, dialog, pickerOption,
} from '@/build';
import {
  sportMatchNoteListApi as listApi,
} from '@/services/api/game';
import CONST from './CONST';
import GameDialog from './gameDialog';

export default {
  name: 'game-detail',
  mixins: [form, grid, dialog, pickerOption],
  components: {
    GameDialog,
  },

  data() {
    return {
      localSummariesText: '当前页汇总 / 所有页汇总',
      filters: {
        queryTime: undefined,
        username: undefined,
        sportsEventName: undefined,
        page: 1,
        size: 20,
      },
      rules: {
        queryTime: [
          { required: true, message: '查询时间不能为空', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '会员账户名不能为空', trigger: 'blur' },
        ],
        sportsEventName: [
          { required: true, message: '投注内容不能为空', trigger: 'blur' },
        ],
      },
      statistic: [
        {
          index: 10,
          prop: 'amount',
          format: value => `${_.currency(value)} / ${_.currency(this.tableData.sum ? this.tableData.sum.amount : undefined)}`,
        },
        {
          index: 11,
          prop: 'prize',
          format: value => `${_.currency(value)} / ${_.currency(this.tableData.sum ? this.tableData.sum.prize : undefined)}`,
        },
        {
          index: 13,
          prop: 'totalWin',
          format: value => `${_.currency(value)} / ${_.currency(this.tableData.sum ? this.tableData.sum.win : undefined)}`,
        },
        {
          index: 14,
          prop: 'effectiveAmount',
          format: value => `${_.currency(value)} / ${_.currency(this.tableData.sum ? this.tableData.sum.effectAmount : undefined)}`,
        },
        {
          index: 17,
          prop: 'validAmount',
          format: value => `${_.currency(value)} / ${_.currency(this.tableData.sum ? this.tableData.sum.validAmount : undefined)}`,
        },
      ],
      tableData: {
        list: [],
        total: 0,
      },
      choiceDate: '',
    };
  },
  computed: {
    pickerLimit() { // 限制时间范围为30天
      const that = this;
      const pickerDayStep = _.cloneDeep(this.pickerDayStep);
      const onPick = ({ maxDate, minDate }) => {
        that.choiceDate = minDate.getTime();
        if (maxDate) {
          that.choiceDate = '';
        }
      };
      const disabledDate = (time) => {
        if (this.choiceDate) {
          const one = 30 * 24 * 3600 * 1000;
          const minTime = this.choiceDate - one;
          const maxTime = this.choiceDate + one;
          return time.getTime() < minTime || time.getTime() > maxTime;
        }
      };
      pickerDayStep.onPick = onPick;
      pickerDayStep.disabledDate = disabledDate;
      return pickerDayStep;
    },
  },
  methods: {
    resetFilter() {
      this.resetForm('refForm');
      this.filters.queryTime = undefined;
    },
    search() {
      this.doGet({ action: 'getGrid', form: 'refForm' });
    },
    successBack() {
      this.dialogName = '';
    },
    formatBetDetails(betInfo) {
      let { betDetails } = betInfo;
      if (betInfo.game == 3) {
        // 体育投注详情
        let detail = '';
        let { bets } = betInfo;
        if (typeof bets === 'string' && bets != '') {
          bets = JSON.parse(bets);
        }
        _.each(bets, (item) => {
          detail += `联赛：${item.event.tag}双方：${item.event.name}${CONST.sportSelectionNameMap(item.selection)} - ${CONST.sportPeriodNameMap(item.period)} - ${CONST.sportBetTypeMap(item.betType)}，`;
        });
        betDetails = `${detail}等${bets.length}项，共计${_.currency(betInfo.amount)}元`;
      } else if (betInfo.game == 10) {
        // 棋牌投注详情
        let betInfoBetDeatils = betInfo.betDetails;
        if (typeof betInfoBetDeatils === 'string' && betInfoBetDeatils != '') {
          betInfoBetDeatils = JSON.parse(betInfoBetDeatils);
        }
        betDetails = formatChessBetDetail(betInfo.gameName, betInfoBetDeatils);
      }
      return betDetails;
    },
    checkShowDetail(row) {
      if ([consts.PLATFORM_JOY_POKER, consts.PLATFORM_GM_POKER].includes(row.gamePlatformId)) {
        return '';
      }
      return row.betDetails;
    },
  },
  mounted() {
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        let {
          queryTime, username, sportsEventName, page, size,
        } = data;
        if (!queryTime || queryTime.length !== 2) {
          queryTime = [undefined, undefined];
        }
        return {
          username,
          sportsEventName,
          page,
          size,
          startTime: queryTime[0],
          endTime: queryTime[1],
        };
      },
      format: (data) => {
        const tableList = _.map(data.list, (item) => {
          item.betDetails = this.formatBetDetails(item);
          if (item.game == 10 && item.game == 11) {
            item.gameResult = item.win > 0 ? '输' : (item.win == 0 ? '和' : '赢');
          }
          return item;
        });
        data.list = tableList;
        return data;
      },
    });
  },
};
</script>
<style lang="scss" scoped>
  .form-center-tip {
    line-height: 36px;
    padding-right: 10px;
  }
/deep/ {
  .el-table {
    .el-table__body-wrapper{
      max-height: 420px!important;
    }
  }
}
</style>
